define(function (require, exports, module) {
	var W = require('widget');
	var T = require('templatable');
	var SmartWidget = require('smartWidget');

	require('./smartGrid.css');
	var tpl = Handlebars.compile(require('./smartGrid.tpl'));
	var thTpl = Handlebars.compile(require('./th.tpl'));


	var model = _.extend(SmartWidget.model, {
		icon: 'fa-table',               // 图标
		setButton: true,                // 设置按钮
		footer: true,                   // 底边栏
	});


	Handlebars.registerHelper('isData', function (type, options) {
		if (type == "data") {
			return options.fn(this);
		}
	});
	Handlebars.registerHelper('isCheckbox', function (type, options) {
		if (type == "checkbox") {
			return options.fn(this);
		}
	});
	Handlebars.registerHelper('isCommand', function (type, options) {
		if (type == "command") {
			return options.fn(this);
		}
	});
	Handlebars.registerHelper('isColor', function (type, options) {
		if (type == "color") {
			return options.fn(this);
		}
	});

	var defaultColumn = function (type) {
		var column = {};
		column["data"] = {
			type: "data",
			isShow: true,
			widthClass: "ui-column-small",
			sortable: false,
			property: "",               // 数据绑定字段
			sortProperty: "",           // 数据排序排序字段
			label: "",                  // 列头标题
			commandName: "",            // 事件名称
			classes: "",
			title: null,                   // 鼠标移动到数据上显示的,
			id: "",                     // 列id,有property就用property,没有就自己造
			num: 0                      // 列排序字段
		};
		column["checkbox"] = {
			type: "checkbox",
			isShow: true,
			widthClass: "ui-column-mini",
			sortable: false,
			label: "选择",
			property: "",
			sortProperty: "",
			commandName: "",
			classes: "",
			title: null,
			id: "",                     // 列id,有property就用property,没有就自己造
			num: 0                      // 列排序字段
		};
		column["command"] = {
			type: "command",
			isShow: true,
			widthClass: "ui-column-mini",
			sortable: false,
			label: "操作",
			commandName: "set",
			property: "",
			sortProperty: "",
			classes: "",
			title: null,
			id: "",                     // 列id,有property就用property,没有就自己造
			num: 0                      // 列排序字段
		};
		column["color"] = {
			type: "color",
			isShow: true,
			widthClass: "ui-colunm-mini",
			sortable: false,
			label: "",
			property: "",
			sortProperty: "",
			commandName: "",
			classes: "",
			title: null,
			id: "",                     // 列id,有property就用property,没有就自己造
			num: 0                      // 列排序字段
		};
		return column[type];
	};





	var Page = SmartWidget.page.extend({
		attrs: {
			columns: []
		},
		model: {},
		Implements: [T],
		initProps: function () {
			this.on('change:columns', this.mixColumns);
			this.mixColumns(this.get('columns'));
		},
		events: {
		},
		setup: function () {
		},
		render: function(){
			Page.superclass.render.call(this);
			this.renderWidgetContent();
			this.renderColumns();
			return this;
		},

		destroy: function () {
			Page.superclass.destroy.call(this);
		},
		/* DOM action
		 -----------------------------------------*/
		/* action
		-------------------------------------------*/
		/**
		 * 合并列
		 */
		mixColumns: function(value){
			var newValue = [];
			_.each(value, function(v){
				newValue.push(_.extend(defaultColumn(v.type), v));

			});

			this.set('columns', newValue,{
				silent: true
			});
		},

		/* Method
		 --------------------------------------------*/
		/**
		 * 加载组件的内容
		 */
		renderWidgetContent: function(){
			var html = tpl({});
			this.$('.widget-content').html(html);
		},
		/**
		 * 加载列头
		 */
		renderColumns: function(){
			var self = this;
			var columns = this.get('columns');
			if(columns.length == 0){
				return;
			}

			var html = thTpl(columns);
			console.log(html);
			this.$('.widget-content thead tr').html(html);



		}
	});



	exports.page = Page;
	exports.model = model;
});